.cartListBox { 
	width: 750rpx; /* 使用750rpx固定宽度 */

	.title { 
		width: 630rpx; /* 标题区域宽度 */
		padding: 28rpx; /* 小间距 */
		justify-content: space-between; /* 水平两端对齐 */
		display: flex; /* 使用Flex布局 */
	}

	.c_r_text {
		width: 270rpx; /* 右侧文本区域宽度 */
		display: flex; /* 使用Flex布局 */
		justify-content: space-between; /* 内容两端对齐 */
		align-items: center; /* 垂直居中 */

		.price { 
			width: 250rpx; /* 价格部分宽度 */
			text-align: right; /* 文本右对齐 */
			color: #00b362; /* 设置文字为绿色 */
		}

		.delBtn { 
			width: 120rpx; /* 删除按钮宽度 */
			text-align: right; /* 文本右对齐 */
			color: #ff0000; /* 设置文字为红色 */
		}
	}
}

.postBanner { 
	width: 750rpx; /* 使用750rpx固定宽度 */
	height: 200rpx; /* 高度为200rpx */
	background: url(~@/static/coolc/postorder.jpg) no-repeat; /* 背景图片 */
	background-size: 100% 200rpx; /* 背景图片大小填满容器 */
	overflow: hidden; /* 隐藏超出部分 */
	position: relative; /* 相对定位，为子元素提供参考 */

	.car_box { 
		width: 289rpx; /* 车的宽度 */
		height: 160rpx; /* 车的高度 */
		background: url(~@/static/coolc/car.png) no-repeat; /* 车图片 */
		background-size: 100% auto; /* 图片宽度为100%，高度自动 */
		position: absolute; /* 绝对定位 */
		bottom: 0; /* 距离底部0 */
		right: 15%; /* 距离右边15% */
		animation: move 1.667s linear infinite; /* 无限循环移动动画 */
	}
}

.class_box { 
	width: 750rpx; /* 使用750rpx固定宽度 */
	padding: 28rpx; /* 使用28rpx小间距 */

	.title { 
		font-size: 32rpx; /* 标题字体大小 */
	}

	.class_item {
		width: 694rpx; /* 分类项宽度 */
		padding-top: 30rpx; /* 顶部内边距 */
		display: flex; /* 使用Flex布局 */
		justify-content: space-between; /* 水平两端对齐 */
		align-items: center; /* 垂直居中 */
		text-align: center; /* 文本居中 */

		.item_icon { 
			width: 154rpx; /* 图标的宽度 */
			border: 2px solid #ffffff; /* 白色边框 */
			border-radius: 10rpx; /* 边角圆润度 */
			overflow: hidden; /* 超出部分隐藏 */

			.u-image { 
				margin: 12rpx; /* 图片的外边距 */
			}

			&.on { 
				border-color: #00b362; /* 激活状态下边框变绿 */

				.name { 
					color: #00b362; /* 激活状态下文字变绿 */
				}
			}

			.name { 
				width: 154rpx; /* 名称区域宽度 */
				font-size: 26rpx; /* 名称字体大小 */
				height: 50rpx; /* 高度 */
				display: flex; /* 使用Flex布局 */
				justify-content: space-around; /* 水平间距相等 */
				text-align: center; /* 文本居中 */
				color: #666666; /* 文字为灰色 */
			}
		}
	}
}

.husouyq {
	width: 694rpx; /* 父容器宽度 */
	display: flex; /* 使用Flex布局 */
	justify-content: space-between; /* 子元素两端对齐 */

	.cvs {
		width: 33.33%; /* 每个子项宽度占33.33% */
		padding-top: 36rpx; /* 顶部内边距 */

		text { 
			width: 100%; /* 文本宽度占满父元素 */
			text-align: center; /* 文本居中 */
			padding-top: 10rpx; /* 顶部内边距 */
			font-size: 26rpx; /* 字体大小 */
			color: #666666; /* 文字颜色灰色 */
			display: block; /* 块级元素 */
		}

		.ws {
			width: 120rpx; /* 图片容器宽度 */
			height: 120rpx; /* 图片容器高度 */
			background-repeat: no-repeat; /* 背景不重复 */
			background-size: 100% 100%; /* 背景填满容器 */
			background-position: center; /* 背景居中对齐 */
			margin: 0 auto; /* 水平居中 */

			&.is_1 { 
				background-image: url(@/static/coolc/p_1.jpg); /* 设置第一张图片 */
			}

			&.is_2 { 
				background-image: url(@/static/coolc/p_2.jpg); /* 设置第二张图片 */
			}

			&.is_3 { 
				background-image: url(@/static/coolc/p_3.jpg); /* 设置第三张图片 */
			}
		}
	}
}

.addorderBox { 
	padding: 28rpx 0; /* 上下内边距28rpx */

	text {
		width: 100%; /* 宽度占满 */
		display: block; /* 块级元素 */
		text-align: center; /* 文本居中 */
		font-size: 28rpx; /* 字体大小 */
		color: #666666; /* 文字为灰色 */
		padding-bottom: 18rpx; /* 底部内边距 */
	}
}

.addSite { 
	width: 750rpx; /* 宽度占满父容器 */
	height: 180rpx; /* 高度 */
	position: fixed; /* 固定定位 */
	left: 0; /* 靠左边 */
	bottom: 0; /* 靠底部 */
	z-index: 10078; /* 层叠顺序 */
	background: #ffffff; /* 背景颜色白色 */
	box-shadow: 0 0 5px #dedede; /* 添加阴影效果 */

	.buttonBox { 
		width: 694rpx; /* 宽度 */
		margin: 0 auto; /* 水平居中 */
		display: flex; /* 使用Flex布局 */
		justify-content: space-between; /* 子元素两端对齐 */

		.u-btn {
			width: 335rpx; /* 按钮宽度 */
		}
	}

	.agreement {
		width: 750rpx; /* 宽度占满父容器 */
		text-align: center; /* 文本居中 */
		margin: 20rpx 0 18rpx; /* 上下外边距 */

		.agreement-text { 
			padding-left: 8rpx; /* 左边内边距 */
			font-size: 26rpx; /* 字体大小 */
			color: #666666; /* 文字灰色 */

			text { 
				color: #00b362; /* 超链接文本绿色 */
			}
		}
	}
}

.buyOrderBox {
	width: 100rpx; /* 宽度 */
	height: 100rpx; /* 高度 */
	background: linear-gradient(to right, #ffb43f, #ff8a00); /* 渐变背景 */
	border-radius: 120rpx; /* 圆角 */
	position: fixed; /* 固定定位 */
	left: 28rpx; /* 距离左边28rpx */
	bottom: 204rpx; /* 距离底部204rpx */
	z-index: 99; /* 层叠顺序 */
	box-shadow: 0 0 8px #cccccc; /* 添加阴影 */

	.u-icon { 
		width: 100rpx; /* 宽度 */
		height: 100rpx; /* 高度 */
		display: flex; /* 使用Flex布局 */
		justify-content: space-around; /* 水平居中 */
		align-items: center; /* 垂直居中 */
	}
}
